<template>
  <view class="classlist">
    <view class="grid-content">
      <view class="item" v-for="item in pictures" :key="item._id">
        <navigator :url="`/pages/preview/preview?id=${item._id}`" class="image">
          <image class="class-img" :src="item.smallPicurl" mode="aspectFill" />
        </navigator>
      </view>
    </view>
    <view class="pt-2 pb-2">
      <uni-load-more :status="status"></uni-load-more>
    </view>
    <view class="safe-bottom"></view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getWallpaperOfClassifyService } from "../../api/index";
import { onReachBottom } from "@dcloudio/uni-app";
const pictures = ref([]);
let current = 1;
const pageSize = 15;
const finishdeLoad = ref(false);
const isLoading = ref(false);
let classid = "";

const status = computed(() => {
  if (isLoading.value) {
    return "loading";
  } else if (finishdeLoad.value) {
    return "noMore";
  } else {
    return "more";
  }
});

const fetchPictures = (params: {
  classid: string;
  pageSize?: number;
  pageNum?: number;
}) => {
  isLoading.value = true;
  getWallpaperOfClassifyService(params)
    .then((res) => {
      pictures.value = pictures.value.concat(res.data);
      uni.setStorageSync("cacheClasslist", pictures.value);
      if (res.data.length < pageSize) {
        finishdeLoad.value = true;
      }
    })
    .then(() => {
      isLoading.value = false;
    });
};

onLoad((option) => {
  classid = option.id;
  fetchPictures({ classid, pageSize, pageNum: current });
  uni.setNavigationBarTitle({
    title: option.title,
  });
});

onReachBottom(() => {
  if (!finishdeLoad.value) {
    current++;
    fetchPictures({ classid, pageSize, pageNum: current });
  }
});
</script>

<style lang="scss" scoped>
.classlist {
  padding: 0 16rpx;
}
.grid-content {
  display: grid;
  /* 定义三列，每列宽度相等 */
  grid-template-columns: repeat(3, 1fr);
  /* 定义三行，每行高度相等 */
  grid-template-rows: repeat(3, 1fr);
  /* 设置网格间隙 */
  gap: 8rpx;

  .item {
    height: 440rpx;

    border-radius: 8rpx;
    overflow: hidden;
    .image {
      width: 100%;
      height: 100%;
      .class-img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
